<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="../node_modules/d3/dist/d3.js"></script>
<script src="../node_modules/@hpcc-js/wasm/dist/graphviz.umd.js" type="javascript/worker"></script>
<script src="../build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

var dotIndex = 0;
var graphviz = d3.select("#graph").graphviz()
    .transition(function () {
        return d3.transition()
            .ease(d3.easeLinear)
            .delay(500)
            .duration(2000);
    })
    .logEvents(true)
    .on("initEnd", render);

function render() {
    var dotLines = dots[dotIndex];
    var dot = dotLines.join('');
    graphviz
        .renderDot(dot, function () {
            dotIndex += 1;
            if (dotIndex != dots.length) {
                render();
            }
        });
}

var dots = [
    [
        'digraph  {',
        '    node [style="filled"]',
        '    a [fillcolor="#d62728", shape="ellipse"]',
        '    b [fillcolor="#1f77b4", shape="polygon"]',
        '    a -> b',
        '}'
    ],
    [
        'digraph  {',
        '    node [style="filled"]',
        '    a [fillcolor="#d62728", shape="polygon"]',
        '    b [fillcolor="#1f77b4", shape="ellipse"]',
        '    a -> b',
        '}'
    ],
    [
        'digraph  {',
        '    node [style="filled"]',
        '    a [fillcolor="#d62728", shape="triangle"]',
        '    b [fillcolor="#1f77b4", shape="invtriangle"]',
        '    a -> b',
        '}'
    ],
    [
        'digraph  {',
        '    node [style="filled"]',
        '    a [fillcolor="#d62728", shape="invtriangle"]',
        '    b [fillcolor="#1f77b4", shape="triangle"]',
        '    a -> b',
        '}'
    ],
];

</script>
